<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <button id="mybtn">获取学生信息</button>
    <button id="add_btn">添加学生信息</button>
    <table>
        <tbody id="mytbody">

        </tbody>
    </table>


    <script>
        var mybtn = document.getElementById('mybtn');
        var addBtn = document.getElementById('add_btn');

        addBtn.onclick = function() {

            var xmlhttp = new XMLHttpRequest();

            // 相对 URL，相对于当前文档的URL
            xmlhttp.open('POST', 'api/student/addStudent');


            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xmlhttp.onreadystatechange = function() {

                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    console.log('添加学生信息成功')
                }

            };

            xmlhttp.send('clazz=huohau20&name=张三&gender=male&age=18&hobby=read&tel=18537289347&address=luohe&remark=单身程序员');


        };
        // 绑定获取学生信息的事件
        mybtn.onclick = function() {

            var xhr = new XMLHttpRequest();

            xhr.open('GET', 'http://localhost:3008/api/student/getStudent');

            xhr.setRequestHeader('Content-Type', 'text/json');

            xhr.onreadystatechange = function() {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    var students = '';

                    var arr1 = JSON.parse(xhr.responseText);

                    for (var i = 0, len = arr1.length; i < len; i++) {

                        students += '<tr><td>' + arr1[i].clazz + '</td>' +
                            '<td>' + arr1[i].name + '</td>' +
                            '<td>' + arr1[i].gender + '</td>' +
                            '<td>' + arr1[i].age + '</td>' +
                            '<td>' + arr1[i].hobby + '</td>' +
                            '<td>' + arr1[i].tel + '</td>' +
                            '<td>' + arr1[i].address + '</td>' +
                            '<td>' + arr1[i].remark + '</td>' +
                            '<td>' + arr1[i].date + '</td>' +
                            '<td>' + arr1[i].id + '</td></tr>';
                    }

                    var tbody = document.getElementById('mytbody');

                    tbody.innerHTML = students;
                }


            };

            xhr.send(null);
        };
    </script>

</body>

</html>